<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form" style="width: 310px">
  <nz-alert
    *ngIf="error"
    [nzType]="'error'"
    nzMessage="{{ 'validation.signin.invalidusername' | i18n }}"
    [nzShowIcon]="true"
    class="mb-lg"
  ></nz-alert>
  <nz-form-item>
    <nz-form-control nzErrorTip="请输入用户名">
      <nz-input-group nzSize="large" nzPrefixIcon="user">
        <input nz-input formControlName="userName" placeholder="请输入用户名" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzErrorTip="请输入用户密码">
      <nz-input-group nzSize="large" nzPrefixIcon="lock">
        <input nz-input type="password" formControlName="password" placeholder="请输入用户密码" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-col [nzSpan]="12">
      <label nz-checkbox formControlName="remember">{{ 'app.login.remember-me' | i18n }}</label>
    </nz-col>
    <nz-col [nzSpan]="12" class="text-right">
      <a class="forgot" (click)="msg.error('can\'t help you')">{{ 'app.login.forgot-password' | i18n }}</a> |
      <a class="forgot" routerLink="/passport/register" [queryParams]="{ type: 'register' }">{{ 'app.register.register' | i18n }}</a>
    </nz-col>
  </nz-form-item>
  <nz-form-item>
    <button nz-button type="submit" nzType="primary" nzSize="large" [disabled]="form.invalid" [nzLoading]="http.loading" nzBlock>
      {{ 'app.login.login' | i18n }}
    </button>
  </nz-form-item>
</form>

<nz-modal
  [(nzVisible)]="isVisible"
  [nzTitle]=""
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  [nzTitle]="modalrtitle"
  nzWidth="360px"
>
  <ng-template #modalrtitle>
    <div></div>
  </ng-template>

  <ng-template #modalContent>
    <div style="position: relative; width: 250px; height: 140px; margin: 0; padding: 0">
      <app-slidecontrol
        [controlInput]="controlInput"
        showPuzzle="true"
        (successMatch)="successMatch($event)"
        style="position: relative; top: 120px"
        sliderText=""
        puzzleMask=""
      >
      </app-slidecontrol>
    </div>
  </ng-template>

  <ng-template #modalFooter style="display: none">
    <button nz-button nzType="primary" style="display: none"></button>
  </ng-template>
</nz-modal>
